<template>
    <div class="content paper-layout">
        <Form ref="form" :model="form" :show-message="false" :rules="ruleValidate" :label-width="80">
            <div class="paper-container">
                <div id="paper-head" class="paper-head">
                    <p class="exam-title">
                        {{examName}}
                        <span class="timedown" v-if="type==1">
                            倒计时：
                            <count-down :endTime="endTime" @callback="finish()" endText="已结束"></count-down>
                        </span>
                    </p>
                    <span v-if="type==3">
                        <span>学生姓名: {{realName}}</span>
                        <span>学生学号: {{userNo}}</span>
                    </span>
                    <span v-else>
                        <span>总分：{{dx.length*form.dx+duox.length*form.duox+tk.length*form.tk+pd.length*form.pd+jd.length*form.jd+js.length*form.js+alfx.length*form.alfx}}</span>
                        <span>题量 ：{{dx.length+duox.length+tk.length+pd.length+jd.length+js.length+alfx.length}}</span>
                    </span>
                    <span style="float:right">得分：{{zdf}}</span>
                </div>
                <div class="paper-content" id="scrollBox1">
                    <div v-if="type==1" class="paper-dtk">
                        <Poptip placement="right" width="400" transfer>
                            <Button class="dtk-btn" type="primary">
                                答
                                <br />题
                                <br />卡
                            </Button>
                            <div class="maxh" slot="content">
                                <div class="paper-item" v-for="(type,index) in types" :key="'type'+index">
                                    <div class="question-title normal">
                                        <span v-if="index==0&&dx.length>0" class="paper-item-title title-left">
                                            一、单选题
                                            <span>
                                                (
                                                <i class="xdt"></i>
                                                <span class="mr10">已答</span>
                                                <i class="xwd"></i>
                                                <span>未答</span> )
                                            </span>
                                        </span>
                                        <span v-if="index==1&&duox.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+1]}}、多选题
                                            <span>
                                                (
                                                <i class="xdt"></i>
                                                <span class="mr10">已答</span>
                                                <i class="xwd"></i>
                                                <span>未答</span> )
                                            </span>
                                        </span>

                                        <span v-if="index==2&&tk.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+1]}}、填空题
                                            <span>
                                                (
                                                <i class="xdt"></i>
                                                <span class="mr10">已答</span>
                                                <i class="xwd"></i>
                                                <span>未答</span> )
                                            </span>
                                        </span>
                                        <span v-if="index==3&&pd.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+result[3]+1]}}、判断题
                                            <span>
                                                (
                                                <i class="xdt"></i>
                                                <span class="mr10">已答</span>
                                                <i class="xwd"></i>
                                                <span>未答</span> )
                                            </span>
                                        </span>

                                        <span v-if="index==4&&jd.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+result[3]+result[4]+1]}}、简答题
                                            <span>
                                                (
                                                <i class="xdt"></i>
                                                <span class="mr10">已答</span>
                                                <i class="xwd"></i>
                                                <span>未答</span> )
                                            </span>
                                        </span>
                                        <span v-if="index==5&&js.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+result[3]+result[4]+result[5]+1]}}、商品归类题
                                            <span>
                                                (
                                                <i class="xdt"></i>
                                                <span class="mr10">已答</span>
                                                <i class="xwd"></i>
                                                <span>未答</span> )
                                            </span>
                                        </span>
                                        <span v-if="index==6&&alfx.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+result[3]+result[4]+result[5]+result[6]+1]}}、案例分析题
                                            <span>
                                                (
                                                <i class="xdt"></i>
                                                <span class="mr10">已答</span>
                                                <i class="xwd"></i>
                                                <span>未答</span> )
                                            </span>
                                        </span>
                                    </div>
                                    <div class="clearfix">
                                        <a
                                            :class="item.stuAnswer&& JSON.stringify(item.stuAnswer) !== '[]'?'dt-box yd':'dt-box wd'"
                                            :href="'#'+'t'+item.indexData"
                                            v-for="(item,i) in type"
                                            :key="i"
                                        >{{item.indexData}}</a>
                                    </div>
                                </div>
                            </div>
                        </Poptip>
                    </div>
                    <div v-if="cz==2||cz==3" class="paper-dtk">
                        <Poptip placement="right" width="400" transfer>
                            <Button class="dtk-btn" type="primary">
                                答
                                <br />题
                                <br />卡
                            </Button>
                            <div class="maxh" slot="content">
                                <div class="paper-item" v-for="(type,index) in types" :key="'type'+index">
                                    <div class="question-title normal">
                                        <span v-if="index==0&&dx.length>0" class="paper-item-title title-left">
                                            一、单选题
                                            <span>
                                                (
                                                <i class="zq"></i>
                                                <span>正确</span>
                                                <i class="cw"></i>
                                                <span>错误</span> )
                                            </span>
                                        </span>
                                        <span v-if="index==1&&duox.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+1]}}、多选题
                                            <span>
                                                (
                                                <i class="zq"></i>
                                                <span>正确</span>
                                                <i class="cw"></i>
                                                <span>错误</span> )
                                            </span>
                                        </span>

                                        <span v-if="index==2&&tk.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+1]}}、填空题
                                            <span>
                                                (
                                                <i class="zq"></i>
                                                <span>正确</span>
                                                <i class="cw"></i>
                                                <span>错误</span> )
                                            </span>
                                        </span>
                                        <span v-if="index==3&&pd.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+result[3]+1]}}、判断题
                                            <span>
                                                (
                                                <i class="zq"></i>
                                                <span>正确</span>
                                                <i class="cw"></i>
                                                <span>错误</span> )
                                            </span>
                                        </span>

                                        <span v-if="index==4&&jd.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+result[3]+result[4]+1]}}、简答题
                                            <span>
                                                (
                                                <i class="yy"></i>
                                                <span>已阅</span>
                                                <i class="xwd"></i>
                                                <span>未阅</span> )
                                            </span>
                                        </span>
                                        <span v-if="index==5&&js.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+result[3]+result[4]+result[5]+1]}}、商品归类题
                                            <span>
                                                (
                                                <i class="yy"></i>
                                                <span>已阅</span>
                                                <i class="xwd"></i>
                                                <span>未阅</span> )
                                            </span>
                                        </span>
                                        <span v-if="index==6&&alfx.length>0" class="paper-item-title title-left">
                                            {{wz[result[1]+result[2]+result[3]+result[4]+result[5]+result[6]+1]}}、案例分析题
                                            <span>
                                                (
                                                <i class="yy"></i>
                                                <span>已阅</span>
                                                <i class="xwd"></i>
                                                <span>未阅</span> )
                                            </span>
                                        </span>
                                    </div>
                                    <div class="clearfix">
                                        <a v-for="(item,i) in type" :key="i">
                                            <span
                                                v-if="item.type==4||item.type==5||item.type==6||item.type==7"
                                                :class="!item.gettingScore&& typeof item.gettingScore=='object'?'dt-box kong':'dt-box k-blue'"
                                                :href="'#'+'t'+item.indexData"
                                            >{{item.indexData}}{{item.getter}}</span>
                                            <span
                                                v-else
                                                :class="item.gettingScore>0?'dt-box yd':'dt-box zc'"
                                                :href="'#'+'t'+item.indexData"
                                            >{{item.indexData}}</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </Poptip>
                    </div>
                    <div class="paper-item" v-for="(type,index) in types" :key="'type'+index">
                        <div class="question-title">
                            <span v-if="index==0&&dx.length>0" class="paper-item-title title-left">
                                一、单选题
                                <span v-if="!showBtns">(共{{dx.length}}题，合计{{(dx.length)*(form.dx)}}分)</span>
                            </span>
                            <span v-if="index==1&&duox.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+1]}}、多选题
                                <span
                                    v-if="!showBtns"
                                >(共{{duox.length}}题，合计{{(duox.length)*(form.duox)}}分)</span>
                            </span>
                            <span v-if="index==2&&tk.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+1]}}、填空题
                                <span
                                    v-if="!showBtns"
                                >(共{{tk.length}}题，合计{{(tk.length)*(form.tk)}}分)</span>
                            </span>
                            <span v-if="index==3&&pd.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+result[3]+1]}}、判断题
                                <span
                                    v-if="!showBtns"
                                >(共{{pd.length}}题，合计{{(pd.length)*(form.pd)}}分)</span>
                            </span>
                            <span v-if="index==4&&jd.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+result[3]+result[4]+1]}}、简答题
                                <span
                                    v-if="!showBtns"
                                >(共{{jd.length}}题，合计{{(jd.length)*(form.jd)}}分)</span>
                            </span>
                            <span v-if="index==5&&js.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+result[3]+result[4]+result[5]+1]}}、商品归类题
                                <span
                                    v-if="!showBtns"
                                >(共{{js.length}}题，合计{{(js.length)*(form.js)}}分)</span>
                            </span>
                            <span v-if="index==6&&alfx.length>0" class="paper-item-title title-left">
                                {{wz[result[1]+result[2]+result[3]+result[4]+result[5]+result[6]+1]}}、案例分析题
                                <span
                                    v-if="!showBtns"
                                >(共{{alfx.length}}题，合计{{(alfx.length)*(form.alfx)}}分)</span>
                            </span>
                            <span v-if="showBtns">
                                <!--单选题-->
                                <span v-if="index==0&&type.length>0" class="title-right">
                                    题量：{{dx.length}}
                                    <FormItem class="w60" label="每题分值" prop="dx">
                                        <Input v-model="form.dx" placeholder />
                                    </FormItem>
                                    合计得分：{{(dx.length)*(form.dx)}}
                                </span>
                                <!--多选题-->
                                <span v-if="index==1&&type.length>0" class="title-right">
                                    题量：{{duox.length}}
                                    <FormItem class="w60" label="每题分值" prop="duox">
                                        <Input v-model="form.duox" placeholder />
                                    </FormItem>
                                    合计得分：{{(duox.length)*(form.duox)}}
                                </span>
                                <!--填空题-->
                                <span v-if="index==2&&type.length>0" class="title-right">
                                    题量：{{tk.length}}
                                    <FormItem class="w60" label="每题分值" prop="tk">
                                        <Input v-model="form.tk" placeholder />
                                    </FormItem>
                                    合计得分：{{(tk.length)*(form.tk)}}
                                </span>
                                <!--判断题-->
                                <span v-if="index==3&&type.length>0" class="title-right">
                                    题量：{{type.length}}
                                    <FormItem class="w60" label="每题分值" prop="pd">
                                        <Input v-model="form.pd" placeholder />
                                    </FormItem>
                                    合计得分：{{(type.length)*(form.pd)}}
                                </span>
                                <!--简答题-->
                                <span v-if="index==4&&type.length>0" class="title-right">
                                    题量：{{type.length}}
                                    <FormItem class="w60" label="每题分值" prop="jd">
                                        <Input v-model="form.jd" placeholder />
                                    </FormItem>
                                    合计得分：{{(type.length)*(form.jd)}}
                                </span>
                                <!--商品归类题-->
                                <span v-if="index==5&&type.length>0" class="title-right">
                                    题量：{{type.length}}
                                    <FormItem class="w60" label="每题分值" prop="js">
                                        <InputNumber v-model="form.js" placeholder />
                                    </FormItem>
                                    合计得分：{{(type.length)*(form.js)}}
                                </span>
                                <!--案例分析题-->
                                <span v-if="index==6&&type.length>0" class="title-right">
                                    题量：{{type.length}}
                                    <FormItem class="w60" label="每题分值" prop="alfx">
                                        <InputNumber v-model="form.alfx" placeholder />
                                    </FormItem>
                                    合计得分：{{(type.length)*(form.alfx)}}
                                </span>
                            </span>
                        </div>
                        <div>
                            <div class="question-item clearfix" v-for="(item,i) in type" :key="i">
                                <div class="question-item__content">
                                    <div class="question-title">
                                        <span class="title-left">{{item.indexData}} <span class="nexth"> {{item.topic}} </span>（ ）</span>
                                        <span class="title-right" v-if="showBtns">
                                            <Icon class="f24" @click="up(type,item,i)" type="ios-arrow-dropup" />
                                            <Icon class="f24" @click="down(type,item,i)" type="ios-arrow-dropdown" />
                                            <Icon class="f24" @click="del(type,item,i,1)" type="md-close" />
                                        </span>
                                    </div>
                                    <div class="get-index" v-if="index=='0'" :id="'t'+item.indexData">
                                        <RadioGroup v-model="item.stuAnswer">
                                            <div v-for="(o,index) in item.opt.split('|')" :key="index">
                                                <Radio :disabled="cz==2||cz==3" :label="o?o:item.image.split('|')[index]">
                                                    {{index==0?'A':index==1?'B':index==2?'C':index==3?'D':index==4?'E':index==5?'F':'G'}}
                                                    <span
                                                        v-if="item.image&&item.image.split('|')[index]"
                                                    >
                                                        <img class="opt-img" :src="item.image.split('|')[index]" />
                                                    </span>
                                                    <span v-else>{{o}}</span>
                                                </Radio>
                                            </div>
                                        </RadioGroup>
                                        <div v-if="cz==2||cz==3">
                                            <span v-if="item.gettingScore>0" class="hdzq">回答正确</span>
                                            <span v-else>
                                                <span class="hdcw">回答错误</span>
                                                正确答案：<span class="nexth">{{questionOption[getRight(item,item.answer)]}}</span>
                                            </span>
                                            <div>解析：{{item.analysis}}</div>
                                        </div>
                                    </div>
                                    <div class="get-index" v-if="index=='1'" :id="'t'+item.indexData">
                                        <Checkbox-group v-model="item.stuAnswer">
                                            <div v-for="(o,index) in item.opt.split('|')" :key="o">
                                                <Checkbox
                                                    :disabled="cz==2||cz==3"
                                                    :label="o?o:item.image.split('|')[index]"
                                                    :value="index"
                                                >
                                                    {{index==0?'A':index==1?'B':index==2?'C':index==3?'D':index==4?'E':index==5?'F':'G'}}
                                                    <span
                                                        v-if="item.image&&item.image.split('|')[index]"
                                                    >
                                                        <img class="opt-img" :src="item.image.split('|')[index]" />
                                                    </span>
                                                    <span v-else>{{o}}</span>
                                                </Checkbox>
                                            </div>
                                        </Checkbox-group>
                                        <div v-if="cz==2||cz==3">
                                            <span v-if="item.gettingScore>0" class="hdzq">回答正确</span>
                                            <span v-else>
                                                <span class="hdcw">回答错误</span>
                                                正确答案：<span class="nexth">{{getRights(item,item.answer)}}</span>
                                            </span>
                                            <div>解析：{{item.analysis}}</div>
                                        </div>
                                    </div>
                                    <div class="get-index" v-if="index=='3'" :id="'t'+item.indexData">
                                        <div>
                                            <RadioGroup v-model="item.stuAnswer">
                                                <Radio :disabled="cz==2||cz==3" label="正确">A:正确</Radio>
                                                <Radio :disabled="cz==2||cz==3" label="错误">B:错误</Radio>
                                            </RadioGroup>
                                            <div v-if="cz==2||cz==3">
                                                <span v-if="item.gettingScore>0" class="hdzq">回答正确</span>
                                                <span v-else>
                                                    <span class="hdcw">回答错误</span>
                                                    正确答案：{{item.answer}}
                                                </span>
                                                <div>解析：{{item.analysis}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="get-index"
                                        :id="'t'+item.indexData"
                                        v-if="index=='2'||index=='4'||index=='5'||index=='6'"
                                    >
                                        <textarea
                                            :disabled="cz==2||cz==3"
                                            v-model="item.stuAnswer"
                                            class="w100"
                                            placeholder="请在此处作答"
                                        ></textarea>
                                        <div v-if="cz==3">
                                            <div v-if="index!=2">
                                                <span>老师打分：</span>
                                                <InputNumber class="jsdf fl" v-model="item.gettingScore" @on-blur="check(item)" />
                                                <span>答案：{{item.answer}}</span>
                                            </div>
                                            <div v-else>
                                                <span v-if="item.gettingScore>0" class="hdzq">回答正确</span>
                                                <span v-else>
                                                    <span class="hdcw">回答错误</span>
                                                    正确答案：{{item.answer}}
                                                </span>
                                            </div>

                                            <div>解析：{{item.analysis}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="type==1" class="submit-footer">
                    <Button type="primary" @click="sumbit">保存</Button>
                    <Button type="primary" @click="finish">交卷</Button>
                </div>
                <div v-if="type==3" class="submit-footer">
                    <Button type="primary" @click="yjbc">保存</Button>
                    <Button type="primary" @click="next">批阅下一个</Button>
                    <Button type="primary" @click="cancel">取消</Button>
                </div>
                <div v-if="type==5" class="submit-footer">
                    <Button type="primary" @click="qpbc">保存</Button>
                    <Button type="primary" @click="qpf">交卷</Button>
                </div>
            </div>
        </Form>
    </div>
</template>
<script>
// type:1:考试 2:学生查看试卷 3：阅卷 5：Qp
import moment from 'moment'
import {
    startExam,
    commitExam,
    saveExam,
    viewExam,
    saveMarkExam,
    markNext,
    startQp,
    saveQp,
    commitQp
} from '@/api/studentExam'
import countDown from './count-down.vue'
import { questionOption } from '@/libs/enums'
import { markExam } from '@/api/paper'
import config from '@/config'
export default {
    props: {},
    components: {
        countDown
    },
    inject: ['nextPageReload'],
    data () {
        return {
            userNo: '',
            realName: '',
            stuId: '',
            questionOption: questionOption,
            zdf: 0,
            endTime: '',
            examId: '',
            examName: '',
            data: [],
            showBtns: false,
            result: ['有无数据', 0, 0, 0, 0, 0, 0, 0],
            ruleValidate: {
                dx: [
                    {
                        required: true,
                        type: 'number',
                        message: '',
                        trigger: 'blur,change'
                    }
                ],
                duox: [
                    {
                        required: true,
                        type: 'number',
                        message: '',
                        trigger: 'blur,change'
                    }
                ],
                tk: [
                    {
                        required: true,
                        type: 'number',
                        message: '',
                        trigger: 'blur,change'
                    }
                ],
                pd: [
                    {
                        required: true,
                        type: 'number',
                        message: '',
                        trigger: 'blur,change'
                    }
                ],
                jd: [
                    {
                        required: true,
                        type: 'number',
                        message: '',
                        trigger: 'blur,change'
                    }
                ],
                js: [
                    {
                        required: true,
                        type: 'number',
                        message: '',
                        trigger: 'blur,change'
                    }
                ],
                alfx: [
                    {
                        required: true,
                        type: 'number',
                        message: '',
                        trigger: 'blur,change'
                    }
                ]
            },
            form: {
                dx: '',
                duox: '',
                tk: '',
                pd: '',
                jd: '',
                js: '',
                alfx: ''
            },
            paperList: [],
            types: [],
            wz: {
                '1': '一',
                '2': '二',
                '3': '三',
                '4': '四',
                '5': '五',
                '6': '六',
                '7': '七'
            },
            dx: [],
            duox: [],
            tk: [],
            pd: [],
            jd: [],
            js: [],
            alfx: [],
            type: '',
            cz: '',
            time: 0
        }
    },
    methods: {
        formatSeconds (value) {
            var theTime = parseInt(value) // 需要转换的时间秒
            var theTime1 = 0 // 分
            var theTime2 = 0 // 小时
            var theTime3 = 0 // 天
            if (theTime > 60) {
                theTime1 = parseInt(theTime / 60)
                theTime = parseInt(theTime % 60)
                if (theTime1 > 60) {
                    theTime2 = parseInt(theTime1 / 60)
                    theTime1 = parseInt(theTime1 % 60)
                    if (theTime2 > 24) {
                        // 大于24小时
                        theTime3 = parseInt(theTime2 / 24)
                        theTime2 = parseInt(theTime2 % 24)
                    }
                }
            }
            var result = ''
            if (theTime > 0) {
                result = '' + parseInt(theTime) + '秒'
            }
            if (theTime1 > 0) {
                result = '' + parseInt(theTime1) + '分' + result
            }
            if (theTime2 > 0) {
                result = '' + parseInt(theTime2) + '小时' + result
            }
            if (theTime3 > 0) {
                result = '' + parseInt(theTime3) + '天' + result
            }
            return result
        },
        examWebStock () {
            if (window.WebSocket) {
                const url = config.webStockUrl
                const ws = new window.WebSocket(
                    url + '/webSocket/exam/' + this.$store.state.user.userId
                )
                ws.onopen = function () {
                    console.log(`websocket 已连接`)
                }
                ws.onclose = function () {
                    console.log(`websocket 连接已关闭`)
                }
                ws.onmessage = (evt) => {
                    try {
                        console.log(evt)
                        let received_msg = JSON.parse(evt.data)
                        console.log(received_msg)
                        if (received_msg.msg.indexOf('强制收卷') > -1) {
                            this.$Message.error('老师已强制收卷！')
                            setTimeout(this.finish('强制交卷'), 3000)
                        }
                    } catch (error) {
                        console.log(error)
                    }
                }
                ws.onerror = function (err) {
                    console.log(err)
                }
            } else {
                this.$Notice.warning('您的浏览器不支持 WebSocket!')
            }
        },
        qpf () {
            this.paperList.map((item) => {
                if (item.type == 2) {
                    if (
                        Object.prototype.toString.call(item.stuAnswer) == '[object Array]'
                    ) {
                        item.stuAnswer = item.stuAnswer.join('|')
                    }
                }
            })
            let params = {
                qpId: this.examId,
                list: this.paperList,
                answerTime: this.formatSeconds(this.time)
            }
            commitQp(params).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                this.$Message.success('交卷成功')

                this.nextPageReload()
                this.$router.push({
                    name: 'qplist'
                })
            })
        },
        qpbc () {
            this.paperList.map((item) => {
                if (item.type == 2) {
                    if (
                        Object.prototype.toString.call(item.stuAnswer) == '[object Array]'
                    ) {
                        item.stuAnswer = item.stuAnswer.join('|')
                    }
                }
            })
            let params = {
                qpId: this.$route.query.id,
                answerTime: this.formatSeconds(this.time),
                list: this.paperList
            }
            saveQp(params).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                this.$Message.success('保存成功')
            })
        },
        yjbc () {
            let arr = []
            this.paperList.map((item) => {
                if (item.type == 5 || item.type == 6 || item.type == 7) {
                    arr.push({
                        examDetailId: item.examDetailId,
                        gettingScore: item.gettingScore
                    })
                }
            })
            let params = {
                examId: this.$route.query.id,
                stuId: this.stuId,
                list: arr
            }
            saveMarkExam(params).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                this.$Message.success('保存成功')
            })
        },
        next () {
            let params = { examId: this.$route.query.id }
            markNext(params).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.msg)
                    return
                }
                this.$Message.success('请批阅')
                this.stuId = res.data.data.stuId
                this.userNo = res.data.data.stuNo
                this.realName = res.data.data.stuName
                // this.paperList = []
                // this.types = []
                // this.listCallback(res)
                if (this.stuId != this.$route.query.stuId) {
                    this.nextPageReload()
                    this.$router.replace({
                        name: 'examRead',
                        query: {
                            id: this.$route.query.id,
                            type: 3,
                            examName: this.$route.query.examName,
                            stuId: this.stuId,
                            userNo: this.userNo,
                            realName: this.realName
                        }
                    })
                }
            })
        },
        cancel () {
            this.$router.back(-1)
        },
        check (item) {
            /* if (parseInt(item.gettingScore) == 'NaN') {
                item.gettingScore = null
                this.$Message.error('分数为数字')
            } else {
                item.gettingScore = parseInt(item.gettingScore)
            } */
            if (item.score < item.gettingScore) {
                item.gettingScore = null
                this.$Message.error('不可超过本题满分！')
            }
        },
        setTop (data) {
            let topIndex = data.index
            let titleIndex = data.val - 1
            this.$nextTick(() => {
                let top = 0
                let tit = 0
                let dom = this.$el.querySelectorAll('.get-index')
                console.log(dom[titleIndex].offsetHeight)
                for (let i = 0; i < titleIndex; i++) {
                    top = top + dom[i].offsetHeight
                }
                for (let i = 0; i < topIndex; i++) {
                    tit += 480
                }
                console.log(tit)
                // return;
                let container = this.$el.querySelector('#scrollBox1')
                container.scrollTop = tit + top
            })
        },
        getRight (data, an) {
            let one = ''
            data.opt.split('|').map((item, index) => {
                if (item == an) {
                    one = index + 1
                }
            })
            if (data.image) {
                data.image.split('|').map((item, index) => {
                    if (item == an) {
                        one = index + 1
                    }
                })
            }

            return one
        },
        getRights (data, an) {
            let one = []
            let anArr = an.split('|')
            data.opt.split('|').map((item, index) => {
                if (anArr.indexOf(item) > -1) {
                    one.push(questionOption[index + 1])
                }
            })
            if (data.image) {
                data.image.split('|').map((item, index) => {
                    if (anArr.indexOf(item) > -1) {
                        one.push(questionOption[index + 1])
                    }
                })
            }

            return one.join(',')
        },
        goStart (id, type) {
            let vm = this
            if (type == 1) {
                startExam({ examId: id }).then((res) => {
                    this.listCallback(res)
                })
            } else if (type == 2) {
                // 查看试卷
                viewExam({ examId: id }).then((res) => {
                    this.listCallback(res)
                })
            } else if (type == 3) {
                // 老师阅卷
                let params = {
                    examId: id,
                    stuId: this.$route.query.stuId
                }
                markExam(params).then((res) => {
                    this.listCallback(res)
                })
            } else if (type == 5) {
                // qp
                let params = {
                    qpId: id
                }
                startQp(params).then((res) => {
                    this.listCallback(res)
                })
                setInterval(function () {
                    vm.time++
                }, 1000)
            }
        },
        listCallback (res) {
            if (res.data.code != '0000') {
                this.$Message.error(res.data.data)
                return
            }

            // this.examId = res.data.data.examId
            if (this.type == 1) {
                this.examName = res.data.data.examName
                this.paperList = res.data.data.list
            } else if (this.type == 2) {
                this.examName = this.$route.query.examName
                this.paperList = res.data.data
            } else if (this.type == 3) {
                this.examName = this.$route.query.examName
                this.paperList = res.data.data.list
            } else if (this.type == 5) {
                this.examName = this.$route.query.examName
                this.paperList = res.data.data.list
            }
            var i = 1
            this.paperList.map((item, index) => {
                // 查看试卷显示
                if (this.type == 2 || this.type == 3) {
                    this.zdf = this.zdf + item.gettingScore
                }
                if (item.type == 1) {
                    // 单选题
                    item.indexData = i++
                    this.result[1] = 1
                    this.dx.push(item)
                    this.form.dx = parseInt(item.score)
                }
            })
            this.paperList.map((item, index) => {
                if (item.type == 2) {
                    // 多选题
                    item.indexData = i++
                    this.result[2] = 1
                    item.stuAnswer = item.stuAnswer ? item.stuAnswer.split('|') : []
                    console.log(item.stuAnswer)
                    this.duox.push(item)
                    this.form.duox = parseInt(item.score)
                }
            })
            this.paperList.map((item, index) => {
                if (item.type == 3) {
                    item.indexData = i++
                    this.result[3] = 1
                    this.tk.push(item)
                    this.form.tk = parseInt(item.score)
                }
            })
            this.paperList.map((item, index) => {
                if (item.type == 4) {
                    item.indexData = i++
                    this.result[4] = 1
                    this.pd.push(item)
                    this.form.pd = parseInt(item.score)
                }
            })
            this.paperList.map((item, index) => {
                if (item.type == 5) {
                    item.indexData = i++
                    this.result[5] = 1
                    this.jd.push(item)
                    this.form.jd = parseInt(item.score)
                }
            })
            this.paperList.map((item, index) => {
                if (item.type == 6) {
                    item.indexData = i++
                    this.result[6] = 1
                    this.js.push(item)
                    this.form.js = parseInt(item.score)
                }
            })
            this.paperList.map((item, index) => {
                if (item.type == 7) {
                    item.indexData = i++
                    this.result[7] = 1
                    this.alfx.push(item)
                    this.$set(this.form, 'alfx', parseInt(item.score))
                }
            })
            this.types.push(this.dx)
            this.types.push(this.duox)
            this.types.push(this.tk)
            this.types.push(this.pd)
            this.types.push(this.jd)
            this.types.push(this.js)
            this.types.push(this.alfx)
            if (this.type == 1) {
                this.autoBc()
            }
        },
        bc (msg) {
            let paramsString = JSON.stringify(this.paperList)
            let paramsData = JSON.parse(paramsString)
            paramsData.map((item) => {
                console.log(item.stuAnswer)
                if (item.type == 2) {
                    if (
                        Object.prototype.toString.call(item.stuAnswer) == '[object Array]'
                    ) {
                        item.stuAnswer = item.stuAnswer.join('|')
                    } else {
                        item.stuAnswer = []
                    }
                }
            })
            let params = {
                commitTime: moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss'),
                examId: this.examId,
                force: false,
                list: paramsData,
                stuId: this.$store.state.user.userId
            }
            saveExam(params).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                if (msg != 'no') {
                    this.$Message.success('保存成功')
                }
            })
        },
        autoBc () {
            let vm = this
            vm.bc('no')
            setInterval(() => vm.bc('no'), 10 * 60 * 1000)
        },
        before () {},
        up (data, one, index) {
            if (index != 0) {
                var prev = data[index - 1]
                data.splice(index - 1, 1, one)
                data.splice(index, 1, prev)
            }
        },
        down (data, one, index) {
            if (index != data.length - 1) {
                var now = one
                var next = data[index + 1]
                data.splice(index, 1, next)
                data.splice(index + 1, 1, now)
            }
        },
        del (data, one, index, num) {
            data.splice(index, 1)
            if (data.length == 0) {
                this.result[num] = 0
            }
        },
        sumbit () {
            this.bc()
        },
        finish (msg) {
            this.paperList.map((item) => {
                if (item.type == 2) {
                    if (
                        Object.prototype.toString.call(item.stuAnswer) == '[object Array]'
                    ) {
                        item.stuAnswer = item.stuAnswer.join('|')
                    }
                }
            })
            let params = {
                commitTime: moment().locale('zh-cn').format('YYYY-MM-DD HH:mm:ss'),
                examId: this.examId,
                force: msg == '强制交卷',
                list: this.paperList,
                stuId: this.$store.state.user.userId
            }
            commitExam(params).then((res) => {
                if (res.data.code != '0000') {
                    this.$Message.error(res.data.data)
                    return
                }
                this.$Message.success('交卷成功')

                this.nextPageReload()
                this.$router.push({
                    name: 'studentHome'
                })
            })
        },
        prev () {},
        handleBack () {
            this.$router.replace({
                name: 'testPaperList'
            })
        },
        goBack () {}
    },
    mounted () {
        // 进来先考试
        this.examId = this.$route.query.id

        console.log(this.examId)
        this.endTime = this.$route.query.endTime
        this.type = this.$route.query.type
        this.cz = this.$route.query.type
        this.goStart(this.examId, this.type)
        if (this.type == 1) {
            this.examWebStock()
        }
        if (this.type == 3) {
            this.stuId = this.$route.query.stuId
            this.realName = this.$route.query.realName
            this.userNo = this.$route.query.userNo
        }
        // this.bc(this.paperList);
    }
}
</script>

<style>
.w60.ivu-form-item {
  margin-bottom: 0px;
  display: inline-block;
}
.w60 input {
  width: 60px;
}

.mr10 {
  margin-right: 10px;
}
.normal .paper-item-title {
  font-weight: normal !important;
  font-size: 14px;
}
.dtk-btn {
  text-align: center;
  width: 42px;
  height: 80px;
}
</style>
<style lang="less" scoped>
.w100 {
  width: 100%;
  min-height: 60px;
  border: 1px solid rgb(204, 204, 204);
}
.exam-title {
  font-size: 18px;
  text-align: center;
}
.submit-footer {
  margin-top: 20px;
  height: 60px;
  line-height: 60px;
  background: rgba(102, 102, 102, 1);
}
.dt-box {
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  float: left;
  border: 1px solid #000;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #000;
  text-align: center;
}
.yd {
  background: rgba(0, 204, 0, 0.498039);
}
.zc {
  background: #ff0000;
}
.k-blue {
  background: rgba(0, 204, 255, 0.498039);
}
.kong {
}
.mh-40 {
  min-height: 60px;
}
.xdt {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: rgba(0, 204, 0, 0.498039);
  border: 1px solid #000;
  margin-top: 2px;
  vertical-align: middle;
  margin-bottom: 2px;
  margin-right: 5px;
  margin-left: 5px;
}
.xwd {
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 1px solid #000;
  margin-top: 2px;
  vertical-align: middle;
  margin-bottom: 2px;
  margin-right: 5px;
  margin-left: 5px;
}
.yy {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: rgba(0, 204, 255, 0.498039);
  border: 1px solid #000;
  margin-top: 2px;
  vertical-align: middle;
  margin-bottom: 2px;
  margin-right: 5px;
  margin-left: 5px;
}
.jsdf {
  width: 60px;
}
.zq {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: rgba(0, 204, 0, 0.498039);
  border: 1px solid #000;
  margin-top: 2px;
  vertical-align: middle;
  margin-bottom: 2px;
  margin-right: 5px;
  margin-left: 5px;
}
.cw {
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 1px solid #000;
  margin-top: 2px;
  vertical-align: middle;
  margin-bottom: 2px;
  margin-right: 5px;
  margin-left: 5px;
  background: #ff0000;
}
.hdzq {
  color: #00cc00;
}
.hdcw {
  color: #ff0000;
}
.clearfix {
  overflow: auto;
}
.opt-img {
  width: 200px;
  height: 150px;
}
.f24 {
  font-size: 24px;
}
.paper-layout {
  h2 {
    text-align: center;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 10px;
  }
  .paper-head {
    position: relative;
    margin: 0 auto;
    padding: 10px;
    background-color: #eee;
    font-size: 14px;
    span + span {
      margin-left: 20px;
    }
    .timedown {
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
  .paper-container {
    border: 1px solid #ccc;
    background: #eee;
    position: relative;
    .paper-dtk {
      position: fixed;
      right: 60px;
      top: 45%;
    }
  }
  .paper-content {
    margin: 0 auto;
    padding: 20px 10px;
    background: #fff;
  }
}
.paper-item {
  & + & {
    margin-top: 10px;
  }
}
.paper-item-title {
  font-weight: 700;
  font-size: 18px;
}
.question-item__content {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 10px;
  margin-bottom: 10px;
}
.question-title {
  display: flex;
  .title-left {
    line-height: 30px;
  }
  .title-right {
    flex: 1;
    line-height: 30px;
    text-align: right;
    min-width: 100px;
  }
}
.nexth{
    white-space:pre;
    word-wrap:break-word;
    white-space: normal;
}
.maxh{
    max-height:500px;
}
</style>
